<template>
    <div>
        <div
            v-if="localvisible"
            :class="['custom-dialog', isMinimized ? 'minimized' : '']"
            :style="dialogStyle"
        >
            <!-- 标题栏 -->
            <div v-if="!isMinimized" class="dialog-title">
                <span style="color: #fff">操作票</span>
                <div class="dialog-controls">
                    <el-button size="medium" @click="toggleMinimized" style="border: none;background-color: transparent;color: white" icon="el-icon-caret-bottom">
                    </el-button>
                    <el-button size="medium" @click="closeDialog" style="border: none;background-color: transparent;color: white" icon="el-icon-close">

                    </el-button>
                </div>

            </div>

            <!-- 最小化时标题栏 -->
            <div v-if="isMinimized" class="dialog-minimized miniTitle">
                <span style="color: #fff">操作票</span>
                <el-button size="medium" @click="toggleMinimized" style="border: none;background-color: transparent;color: white" icon="el-icon-caret-top">
                </el-button>
            </div>

            <!-- 内容区域 -->
            <div v-show="!isMinimized" class="dialog-content" style="position: relative" >
                <p style="position: absolute;top: -1.5rem;left: 0;color: #fff">当前操作：{{currentHandle}}</p>
                <div style="margin: 2rem auto;width: 90%;display: flex;flex-direction: column;align-items: center;height: 30rem;">
                    <div class="handles">
                  <el-button v-for="(item,index) in btns" :key="index" @click="handleTicket(item)">{{item}}</el-button>
                    </div>

                <div class="btns">
                    <el-button type="primary" @click="parseHandle">结束操作</el-button>
                    <el-button type="primary" @click="closeSys">退出程序</el-button>
                </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>

    export default {
    name: 'operationTicket',
    data() {
    return {
    localvisible: false, // 控制窗口显示/隐藏
    isMinimized: false,
        ws:undefined,
        currentHandle:this.$store.state.handleTicket||'无',
        btns:['生成操作票','预演操作票','功能维护','对位操作','传电脑钥匙']

};
},
    props: {
    visible: {
    type: Boolean,
    default: false,
},
},
    computed: {
    dialogStyle() {
    return this.isMinimized
    ? { position: "fixed", bottom: "0", left: "0",width: "15rem" }
    : { position: "fixed", bottom: "0", left: "0",width: "15rem"};
},
},
    methods: {
    toggleMinimized() {
    this.isMinimized = !this.isMinimized;
},
        handleTicket(val){
        if (this.$store.state.handleTicket && this.$store.state.handleTicket!==val){
            this.$message.error('请先结束当前操作')
            return
        }
            this.$emit('handleTicket',val)
            this.currentHandle=val
            this.$store.commit('handleTicket',val)
        },
        parseHandle(){
        this.$store.commit('handleTicket','')
        this.currentHandle='无'
            this.$store.commit('setTicketType','')
            this.$message.success('已退出操作')
            this.$emit('closeAll')
        },
    closeDialog() {
    this.localvisible = false;
    this.$emit("updateVisible", false);
},
        closeSys(){
        if (this.$store.state.handleTicket){
            this.$message.error('请先结束操作')
            return
        }

            this.ws.send(JSON.stringify({"cmd":"kpFunctionState","state":"0"}))
        }
},
    watch: {
    visible(newValue) {
    this.localvisible = newValue;
    if (newValue &&!this.ws){
        this.ws=this.$store.state.webSocket
            this.ws.addEventListener('message',(e)=>{
                let data=JSON.parse(e.data)
                if (data.cmd==='kpFunctionState'&&data.state!=='1'){
                    this.$store.commit('ticketVisible',false)
                    this.$message.success('已退出操作票模式')
                }
            })
    }
},
},
    mounted() {
    this.localvisible = this.visible;
},
};
</script>

<style scoped>


/* 模态框容器 */
.custom-dialog {
    background-color: rgb(2, 22, 42);
    border: 1px solid #ccc;
    border-radius: 8px;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* 最小化样式 */
.custom-dialog.minimized {
    width: 300px;
    height: 40px;
    bottom: 10px;
    right: 10px;
    top: auto;
    left: auto;
    transform: none !important;
    cursor: pointer;
}

/* 标题栏样式 */
.dialog-title,
.dialog-minimized {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: rgb(2, 22, 42);
    border-bottom: 1px solid #ddd;
}

.miniTitle{
    align-items: start;
    .el-button{
        margin-top: -8px;
    }
}
/* 内容区域样式 */
.dialog-content {
    height: 35rem;
}
.handles{
    width: 80%;
    border: 1px solid #666;
    overflow: auto;
    height: 30rem;
    text-align: center;
    >.el-button{
        margin: 1rem auto;
        text-align: center;
    }
}
.btns{
    position: fixed;
    bottom: 1rem;
    >.el-button {
        color: #ebeff0;
        background: linear-gradient(#176575, #07283f);
        border: 0;
        box-shadow: 0 -2px 0 rgba(16, 164, 195, 0.8);
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            background: linear-gradient(#1a7384, #083850);
            box-shadow: 0 -2px 0 rgba(16, 164, 195, 1);
        }

        &:active {
            background: linear-gradient(#145c66, #06283a);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
            transform: translateY(1px);
        }

        &:disabled {
            color: #b2b6b7;
            background: linear-gradient(#4a4d4e, #2c2f30);
            box-shadow: none;
            cursor: not-allowed;
            opacity: 0.7;
        }
    }
}
.handles .el-button {
    color: #ebeff0;
    background: linear-gradient(#176575, #07283f);
    border: 0;
    box-shadow: 0 -2px 0 rgba(16, 164, 195, 0.8);
    width: 8rem;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
        background: linear-gradient(#1a7384, #083850);
        box-shadow: 0 -2px 0 rgba(16, 164, 195, 1);
    }

    &:active {
        background: linear-gradient(#145c66, #06283a);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
        transform: translateY(1px);
    }

    &:disabled {
        color: #b2b6b7;
        background: linear-gradient(#4a4d4e, #2c2f30);
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.7;
    }
}
.dialog-title>span{
    font-size: 1.5rem;
    font-weight: 700;
}
</style>

